﻿@model DHQGHN.PM2.Models.Online.Khaisinh1Model

<script>
     @functions{
         public string GetAntiForgeryToken()
         {
             string cookieToken, formToken;
             AntiForgery.GetTokens(null, out cookieToken, out formToken);
             return cookieToken + "," + formToken;
         }
     }
    jQuery(function ($) {
        Tooltip();
        $("#RDOB1").mask("99/99/9999", { placeholder: "dd/MM/yyyy" });
        var time = "";
        if ($("#RDOB").val() != "") {
            ngay = $("#RDOB").val().substring(6, 8);
            thang = $("#RDOB").val().substring(4, 6);
            nam = $("#RDOB").val().substring(0, 4);
            $("#RDOB1").val(ngay + '/' + thang + '/' + nam);
        }
        Checkngay("DAYKS1");
        Checkthang("MONTHKS1");
        Checknam("YEARKS1");
        CheckError("RDOB1");

        codenp = $("#CODENP").val();
        tinhnp = $("#CODENP").val().substring(0, 2);
        huyennp = $("#CODENP").val().substring(0, 5);
        coderpob = $("#CODERPOB").val();
        tinhrpob = $("#CODERPOB").val().substring(0, 2);
        huyenrpob = $("#CODERPOB").val().substring(0, 5);
        if (codenp != "") {
            $("#Tinh1").val(tinhnp);
        }
        if (coderpob != "") {
            $("#Tinh").val(tinhrpob);
        }
        if ($("#Tinh1").val() != "-1") {
            $.ajax({

                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Tinh1").val(),
                    level: '2'
                },
                success: function (states) {
                    $("#Huyen1").append('<option value="' + '-1' + '">' +
               '-- Chọn Huyện --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Huyen1").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function () {
                    $("#Huyen1").val(huyennp);
                    $("#XANP").empty();
                    $("#XANP").append('<option value="' + '-1' + '">' +
                        '-- Chọn Xã --' + '</option>');
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("GetAdministrativeUnit1")', 
                        headers: {
                            'VerificationToken': '@GetAntiForgeryToken()'
                        },
                        dataType: 'json',

                        data: {
                            code: $("#Huyen1").val(),
                            level: '3'
                        },
                       

                        success: function (states) {

                            $.each(states, function (i, state) {
                                $("#XANP").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');

                            });

                        },
                        complete: function () {
                            $("#XANP").val(codenp);
                            Check();
                        },
                        error: function (ex) {
                            alert('Failed to retrieve states.' + ex);
                        }
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        } else {
            $("#Huyen1").append('<option value="' + '-1' + '">' +
                 '-- Chọn Huyện --' + '</option>');
            $("#XANP").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
        }

        $("#Tinh1").change(function () {
            $("#Huyen1").empty();
            $("#XANP").empty();
            $("#divLoading").show();
            $("#Huyen1").append('<option value="' + '-1' + '">' +
                 '-- Chọn Huyện --' + '</option>');
            $("#XANP").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")', 
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Tinh1").val(),
                    level: '2'
                },
                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#Huyen1").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function (states) {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        });
        $("#Huyen1").change(function () {
            $("#XANP").empty();
            $("#divLoading").show();
            $("#XANP").append('<option value="' + '-1' + '">' +
                '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Huyen1").val(),
                    level: '3'
                },

                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#XANP").append('<option value="' + state.Value + '">' +
                            state.Text + '</option>');
                    });

                },
                complete: function () {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        });
        if ($("#Tinh").val() != "-1") {
            $.ajax({

                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")', 
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Tinh").val(),
                    level: '2'
                },
                success: function (states) {
                    $("#Huyen").append('<option value="' + '-1' + '">' +
               '-- Chọn Huyện --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#Huyen").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function (states) {
                    $("#Huyen").val(huyenrpob);
                    $("#XARPOB").empty();
                    $("#XARPOB").append('<option value="' + '-1' + '">' +
                        '-- Chọn Xã --' + '</option>');
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("GetAdministrativeUnit1")', 
                        headers: {
                            'VerificationToken': '@GetAntiForgeryToken()'
                        },
                        dataType: 'json',

                        data: {
                            code: $("#Huyen").val(),
                            level: '3'
                        },

                        success: function (states) {

                            $.each(states, function (i, state) {
                                $("#XARPOB").append('<option value="' + state.Value + '">' +
                                     state.Text + '</option>');
                      

                            });

                        },
                        complete: function () {
                            $("#XARPOB").val(coderpob);
                            Check();
                        },
                        error: function (ex) {
                            alert('Failed to retrieve states.' + ex);
                        }
                    });

                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        } else {
            $("#Huyen").append('<option value="' + '-1' + '">' +
                 '-- Chọn Huyện --' + '</option>');
            $("#XARPOB").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
        }
        $("#Tinh").change(function () {
            $("#Huyen").empty();
            $("#XARPOB").empty();
            $("#divLoading").show();
            $("#Huyen").append('<option value="' + '-1' + '">' +
                 '-- Chọn Huyện --' + '</option>');
            $("#XARPOB").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")', 
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Tinh").val(),
                    level: '2'
                },
                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#Huyen").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function (states) {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        });
        $("#Huyen").change(function () {
            $("#XARPOB").empty();
            $("#divLoading").show();
            $("#XARPOB").append('<option value="' + '-1' + '">' +
                '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")', 
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#Huyen").val(),
                    level: '3'
                },
            

                success: function (states) {
                  
                    $.each(states, function (i, state) {
                        $("#XARPOB").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                       

                    });

                },
                complete: function () {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        });
        $.ajax({
            url: '@Url.Action("GetAllByListName")',
            dataType: 'json',
            method: 'GET',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: { 'tablename': 'COUNTRY' },
            success: function (data, textStatus, jqXHR) {
                $(".COUNTRY_ID").append('<option value="">' +
                '-- Chọn Quốc Tịch --' + '</option>');
                $.each(data, function (i, item) {
                    $(".COUNTRY_ID").append('<option value="' + item.CodeID + '">' +
                         item.Name + '</option>');
                  

                });
                $(".COUNTRY_ID").val("@Model.COUNTRY_ID");
            },
            complete: function () {
                Check();
            }

        });
        $.ajax({
            url: '@Url.Action("GetAllByListName")',
            dataType: 'json',
            method: 'GET',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: { 'tablename': 'ETHNIC' },
            success: function (data, textStatus, jqXHR) {
                $.each(data, function (i, item) {
                    $(".ETHNIC_ID").append('<option value="' + item.CodeID + '">' +
                         item.Name + '</option>');


                });

                $(".ETHNIC_ID").val(@Model.ETHNIC_ID);
            },
            complete: function () {
                Check();
            }

        });

    });

    function ClickButton(Next) {
        $("#divLoading").show();
        ngay = $("#DAYKS1").val();
        thang = $("#MONTHKS1").val();
        nam = $("#YEARKS1").val();
        MIDDLE_NAME = $("#MIDDLE_NAME").val();
        LAST_NAME = $("#LAST_NAME").val();
        FIRST_NAME = $("#FIRST_NAME").val();
        var time = "";
        var rdob = ""
        if ($("#RDOB1").val() != "") {
            time = $("#RDOB1").val().split("/");
            rdob = time[2] + time[1] + time[0];
        }
        xanp = $("#XANP").val();
        if (xanp == "-1") {
            xanp = "";
        }
        xarp = $("#XARPOB").val();
        if (xarp == "-1") {
            xarp = "";
        }
        var dataSend = {
            'HOUSEHOLD_ID': $("#HOUSEHOLD_ID").val(),
            'RESIDENT_ID': $("#RESIDENT_ID").val(),
            'LAST_NAME': $("#LAST_NAME").val(),
            'MIDDLE_NAME': $("#MIDDLE_NAME").val(),
            'FIRST_NAME': $("#FIRST_NAME").val(),
            'DATE_OF_BIRTH': nam + thang + ngay,
            'PLACE_OF_BIRTH': $("#PLACE_OF_BIRTH").val(),
            'RDOB': rdob,
            'RPOB_ADM_UNIT_ID': xarp,
            'GENDER_ID': $("#GENDER_ID").val(),
            'ETHNIC_ID': $(".ETHNIC_ID").val(),
            'COUNTRY_ID': $(".COUNTRY_ID").val(),
            'BIRTH_REG_BOOK_NUM': $("#BIRTH_REG_BOOK_NUM").val(),
            'BIRTH_REG_NUM': $("#BIRTH_REG_NUM").val(),
            'NATIVE_PLACE': $("#NATIVE_PLACE").val(),
            'NP_ADM_UNIT_ID': xanp,
            'NEXT': Next,

        };
        var jqXHR = $.ajax({
            url: '@Url.Action("Khaisinh1","Online")',
            dataType: 'html',
            method: 'post',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            cache: false,
            data: dataSend,
            success: function myfunctionSuccess(data, textStatus, jqXHR) {
                if (Next == "2") {
                    $('#formLogin').html(data);
                }
                else {
                    $('#loadPartial').html(data);
                }
            },
            complete: function (jqXHR, textStatus) {
                $("#divLoading").hide();
                $("#btnNext").removeAttr("disabled");
                $("#btnBack").removeAttr("disabled");
                $('button[type=button]').each(function () {
                    input = $(this);
                    var resident = input.attr("data-resident");
                    if ($("#RESIDENT_ID").val() == resident) {
                        if (MIDDLE_NAME != "") {
                            input.text(LAST_NAME + " " + MIDDLE_NAME + " " + FIRST_NAME);
                        } else {
                            input.text(LAST_NAME + " " + FIRST_NAME);
                        }
                    }
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('Có lỗi xảy ra trong quá trình lưu thông tin: ' + errorThrown);
            },
        });
    }
    function Check() {
        var COUNTRY_ID = $(".COUNTRY_ID").val();
        var ETHNIC_ID = $(".ETHNIC_ID").val();
        var NP_ADM_UNIT_ID = $("#XANP").val();
        if (NP_ADM_UNIT_ID == "-1") {
            NP_ADM_UNIT_ID = "";
        }
        var RPOB_ADM_UNIT_ID = $("#XARPOB").val();
        if (RPOB_ADM_UNIT_ID == "-1") {
            RPOB_ADM_UNIT_ID = "";
        }
        var coun = $("#COUNTRY_ID").val();
        if (COUNTRY_ID == coun && ETHNIC_ID == "@Model.ETHNIC_ID" && NP_ADM_UNIT_ID == codenp && RPOB_ADM_UNIT_ID == coderpob) {
            $("#divLoading").hide();
            $("#btnNext").removeAttr("disabled");
            $("#btnBack").removeAttr("disabled");
        }
        else {
            $("#divLoading").show();
            $("#btnNext").attr("disabled", "disabled");
            $("#btnBack").attr("disabled", "disabled");
        }

    };

    $("#btnNext").click(function (event, giatri) {
        if (checkhtml()) {
            alert("Dữ liệu nhập không được có ký tự '<' ở đầu.");
        } else {
            if ($("#LAST_NAME").val() == "" || $("#FIRST_NAME").val() == "") {
                alert("Họ hoặc Tên khai sinh không được để trống !");
            }
            else {
                if (giatri != null) {
                    ClickButton(giatri);
                }
                else {
                    if (Checkdatetime("DAYKS1", "MONTHKS1", "YEARKS1") == 0) {
                        ClickButton(1);
                    }


                }
            }
        }
    });
    $("#btnBack").click(function () {
        if (checkhtml()) {
            alert("Dữ liệu nhập không được có ký tự '<' ở đầu.");
        } else {
            if ($("#LAST_NAME").val() == "" || $("#FIRST_NAME").val() == "") {
                alert("Họ hoặc Tên khai sinh không được để trống !");
            } else {
                ClickButton(0);
            }
        }
    });
</script>
<style>
    .ui-tooltip, .arrow:after {
        background: #FAFAD2;
    }

    .ui-tooltip {
        color: black;
        font-size: 12px;
    }

    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
    }

        .arrow.top {
            top: -16px;
            bottom: auto;
        }

        .arrow.left {
            left: 20%;
        }

        .arrow:after {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 6px 5px 9px -9px black;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
</style>

<div class="noidung-nhaponline">
    <div class="login-fields2">
        <p style="float: left; padding-right: 5px; vertical-align: top;">
            <img src="../Images/rt_arrow.gif">
        <p>Thông tin Khai sinh:</p>
    </div>
    <div class="row row-online-table-head">
        <div class="col-md-2">
            @Html.LabelFor(model => model.LAST_NAME, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.LAST_NAME, new { @class = "form-control ", MaxLength = 50, Tabindex = 1, @placeholder = "First name" })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.COUNTRY_ID, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            <select class="COUNTRY_ID form-control" tabindex="9"></select>
        </div>
    </div>
    <div class="row row-online-table1">
        <div class="col-md-2">
            @Html.LabelFor(model => model.MIDDLE_NAME, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.MIDDLE_NAME, new { @class = "form-control ", MaxLength = 150, Tabindex = 2 })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.BIRTH_REG_NUM, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            @Html.TextBoxFor(model => model.BIRTH_REG_NUM, new { @class = "form-control ", MaxLength = 25, Tabindex = 10 })
        </div>
    </div>
    <div class="row row-online-table1">
        <div class="col-md-2">
            @Html.LabelFor(model => model.FIRST_NAME, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.FIRST_NAME, new { @class = "form-control ", MaxLength = 50, Tabindex = 3 })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.BIRTH_REG_BOOK_NUM, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            @Html.TextBoxFor(model => model.BIRTH_REG_BOOK_NUM, new { @class = "form-control ", MaxLength = 25, Tabindex = 11, @title = @Html.ToolTipMessageFor(m => m.BIRTH_REG_BOOK_NUM) })
        </div>
    </div>
    <div class="row row-online-table1">
        <div class="col-md-2">
            @Html.LabelFor(model => model.GENDER_ID, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            @Html.DropDownListFor(model => model.GENDER_ID, new SelectList(
                           new List<Object> {
                                new { Value = 0 , Text = "Không xác định"  },
                                new { Value = 1 , Text = "Nam"  },
                                new { Value = 2 , Text = "Nữ"  }
                           }, "Value", "Text"), new { @class = "form-control", style = "width:55%;", Tabindex = 4 })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.RDOB, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            @Html.TextBox("RDOB1", "", new { @class = "form-control ", Tabindex = 12 })
        </div>
    </div>
    <div class="row row-online-table1">
        <div class="col-md-2">
            @Html.LabelFor(model => model.DATE_OF_BIRTH, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            
            @Html.TextBoxFor(model => model.DAYKS1, new { @class = "form-control", style = "width: 20%; display: inline;", MaxLength = 2, Tabindex = 5, @title = @Html.ToolTipMessageFor(m => m.DAYKS1) })/@Html.TextBoxFor(model => model.MONTHKS1, new { @class = "form-control", style = "width: 20%; display: inline;", MaxLength = 2, Tabindex = 6, @title = @Html.ToolTipMessageFor(m => m.MONTHKS1) })/@Html.TextBoxFor(model => model.YEARKS1, new { @class = "form-control", style = "width: 35%; display: inline;", MaxLength = 4, Tabindex = 7, @title = @Html.ToolTipMessageFor(m => m.YEARKS1) })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.ETHNIC_ID, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            <select class="ETHNIC_ID form-control " style="width:75%;" tabindex="13"></select>
            <input type="hidden" name="ETHNIC_ID_HIDDEN" value="@Model.ETHNIC_ID" />
        </div>

    </div>

    <div class="row row-online-table1">

        <div class="col-md-2">
            @Html.LabelFor(model => model.PLACE_OF_BIRTH, new { @class = "control-label " })
        </div>
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.PLACE_OF_BIRTH, new { @class = "form-control", MaxLength = 255, Tabindex = 8, @title = @Html.ToolTipMessageFor(m => m.PLACE_OF_BIRTH) })
        </div>
        <div class="col-md-2 lbldai">
            @Html.LabelFor(model => model.NATIVE_PLACE, new { @class = "control-label " })
        </div>
        <div class="col-md-4 controldai">
            @Html.TextBoxFor(model => model.NATIVE_PLACE, new { @class = "form-control", MaxLength = 255, Tabindex = 14, @title = @Html.ToolTipMessageFor(m => m.NATIVE_PLACE) })
        </div>
    </div>
    <div class="row row-online-table1">
        <div class="col-md-3 widthlabelTinhHuyenXa">
            @Html.LabelFor(model => model.NP_ADM_UNIT_ID, new { @class = "control-label " })
        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("Tinh1", ViewData["DISTRICT_CODE"] as List<SelectListItem>, new { @class = "form-control", Tabindex = 15, title = "Đơn vị hành chính 'Nguyên Quán' - cấp Tỉnh." })

        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("Huyen1", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", Tabindex = 16, title = "Đơn vị hành chính 'Nguyên Quán' - cấp Huyện." })
        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("XANP", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", Tabindex = 17, title = "Đơn vị hành chính 'Nguyên Quán' - cấp Xã." })
        </div>

    </div>
    <div class="row row-online-table1">
        <div class="col-md-3 widthlabelTinhHuyenXa">
            @Html.LabelFor(model => model.RPOB_ADM_UNIT_ID, new { @class = "control-label " })
        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("Tinh", ViewData["DISTRICT_CODE"] as List<SelectListItem>, new { @class = "form-control ", Tabindex = 18, title = "Đơn vị hành chính 'Nơi đăng ký khai sinh' - Cấp Tỉnh." })

        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("Huyen", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", Tabindex = 19, title = "Đơn vị hành chính 'Nơi đăng ký khai sinh' - Cấp Huyện." })
        </div>
        <div class="col-md-3 widthTinhHuyenXa">
            @Html.DropDownList("XARPOB", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", Tabindex = 20, title = "Đơn vị hành chính 'Nơi đăng ký khai sinh' - Cấp Xã." })
        </div>
    </div>
    <div>
        @Html.HiddenFor(model => model.RESIDENT_ID)
        @Html.HiddenFor(model => model.HOUSEHOLD_ID)
        @Html.HiddenFor(model => model.CODENP)
        @Html.HiddenFor(model => model.CODERPOB)
        @Html.HiddenFor(model => model.COUNTRY_ID)
        @Html.HiddenFor(model => model.RDOB)
    </div>
    <center>
        <input type="button" tabindex="21" class="btn btn-small btn-small_online buttonClick btn-success " id="btnBack" value="<< Quay lại">
        <input type="button" tabindex="22" class="btn btn-small btn-small_online btn-success buttonClick" id="btnNext" value="Tiếp tục >>">
    </center>
</div>
